<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/settlement.png" />打款记录</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="businessName" placeholder="企业名称"></el-input>
                  <el-input v-model="settlementNo" placeholder="结算单号"></el-input>
                  <el-button type="primary" @click="search()">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="recordNo" label="记录编号" width="120"> </el-table-column>
                <el-table-column prop="businessName" label="企业名称" width="150">
                </el-table-column>
                <!-- <el-table-column prop="businessNo" label="企业编号" width="120">
                </el-table-column> -->
                <el-table-column prop="settlementNo" label="结算单号" width="120">
                </el-table-column>
                <el-table-column prop="accnbr" label="打款人银行账号" width="170">
                </el-table-column>
                <el-table-column prop="autacc" label="授权账号" width="170">
                </el-table-column>
                <!-- <el-table-column prop="authByName" label="审核人姓名"  width="80">
                </el-table-column>
                <el-table-column prop="authMsg" label="审核意见"  width="200">
                </el-table-column> -->
                <!-- <el-table-column prop="authTime" label="审核时间"  width="150">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.epttim)) }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="createByName" label="创建人姓名"  width="80">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"  width="150">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="curamt" label="本次金额"  width="100">
                </el-table-column>
                <el-table-column prop="curcnt" label="本次笔数"  width="80">
                </el-table-column>
                <!-- <el-table-column prop="eptdat" label="期望到账日期"  width="150">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.eptdat)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="epttim" label="期望到账时间"  width="150">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.epttim)) }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="yurref" label="业务参考号"  width="100">
                </el-table-column> -->
                <el-table-column prop="ttlamt" label="交易总金额"  width="100">
                </el-table-column>
                <el-table-column prop="ttlcnt" label="交易总笔数"  width="80">
                </el-table-column>
                <el-table-column prop="curamt" label="本次金额"  width="100">
                </el-table-column>
                <!-- <el-table-column prop="authStatus" label="审核状态"  width="80">
                  <template #default="item">
                      {{ authStatus[item.row.authStatus] }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="authStatus" label="支付状态"  width="80">
                  <template #default="item">
                    <span v-if="item.row.rtnflg === null">--</span>
                    <span v-else>{{ rtnflg[item.row.rtnflg] }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="payMode" label="打款方式"  width="100">
                  <template #default="item">
                    <span v-if="item.row.payMode == 1">线上</span>
                    <span v-else>线下</span>
                  </template>
                </el-table-column>
                <el-table-column prop="authTime" label="打款时间"  width="150">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.authTime)) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="170"
                    class-name="editor"
                >
                  <template #default="item">
                    <el-button type="text" @click="examineShow(item.row)">查看</el-button>
                    <el-button v-if="item.row.rtnflg === 'Q' || item.row.rtnflg === 'E'" type="text" @click="rtnflgs(item.row)">同步</el-button>
                    <el-button type="text" v-if="item.row.accountBillUrl" style="margin-left: -5px;" @click="excelDownload2(item.row)">下载对账单</el-button>
                    <!-- <el-button v-if="item.row.authStatus == 0" type="text" @click="examines(item.row)">审核</el-button> -->
                  </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog
      title="审核"
      custom-class="task-dialog"
      v-model="taskDelShow"
      width="40%"
    >
      <div class="examines">
        <el-form-item>
          <b>审核意见：</b>
          <el-input style="height: 500" type="textarea" v-model="grtdsp"></el-input>
        </el-form-item>   
      </div> 
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDelShow = false">取 消</el-button>
          <el-button type="danger" @click="taskDelShow1(1)">驳 回</el-button>
          <el-button type="primary" @click="taskDelShow1(2)">通 过</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="查看"
      custom-class="task-dialog"
      v-model="taskDelShows"
      width="70%"
    >
      <div class="infoCon">
        <b><em>审核编号：</em>{{ tableDatas.recordNo  }}</b>
        <b><em>审核意见：</em>{{ tableDatas.authMsg  }}</b>
        <b v-if="tableDatas.authTime == null || tableDatas.authTime == ''"><em>审核时间：</em>--</b>
        <b v-else><em>审核时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(tableDatas.authTime)) }}</b>
        <!-- <b><em>创建人姓名：</em>{{ tableDatas.createByName }}</b> -->
        <b><em>创建时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(tableDatas.createTime)) }}</b>
        <!-- <b><em>期望到账日期：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(tableDatas.eptdat)) }}</b>
        <b><em>期望到账时间：</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(tableDatas.epttim)) }}</b> -->
        <b><em>期望到账日期：</em>{{ tableDatas.eptdat }}</b>
        <b><em>期望到账时间：</em>{{ tableDatas.epttim }}</b>
      </div>
      <div class="cardTits cardTitss cardTitdd table-drop">
        <el-table
          :data="queryTaskByParam"
          stripe
          style="width: 100%"
          ref="multipleTable"
          @sort-change="sortChange"
          >
          <!-- <el-table-column prop="recordNo" label="审核编号" width="120"> </el-table-column> -->
          <el-table-column prop="objacc" label="服务者账号" width="170">
          </el-table-column>
          <el-table-column prop="objacn" label="账号名称" width="100">
          </el-table-column>
          <!-- <el-table-column prop="platformNo" label="平台编号"  width="120">
          </el-table-column> -->
          <el-table-column prop="reqnbr" label="流程实例号"  width="100">
          </el-table-column>
          <el-table-column prop="settlementNo" label="结算单号"  width="120">
          </el-table-column>
          <el-table-column prop="sysflg" label="账户归属"  width="80">
            <template #default="item">
              <span v-if="item.row.sysflg == 'Y'">行内</span>
              <span v-else>行外</span>
            </template>
          </el-table-column>
          <el-table-column prop="trsamt" label="交易金额"  width="100">
          </el-table-column>
          <el-table-column prop="trsseq" label="交易状态"  width="120">
            <template #default="item">
              <span v-if="item.row.trssts === null">--</span>
              <span v-else>{{ trssts[item.row.trssts] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="trstxt" label="交易明细摘要"  width="100">
          </el-table-column>
          <el-table-column prop="errtxt" label="失败原因"  width="120">
            <template #default="item">
              <span v-if="item.row.errtxt === null">--</span>
              <span v-else>{{ item.row.errtxt }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="yurref" label="业务参考号"  width="120">
          </el-table-column>
          <el-table-column prop="accbnk" label="他行账户开户行" width="150">
            <template #default="item">
              <span v-if="item.row.accbnk === null">--</span>
              <span v-else>{{ item.row.accbnk }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="acccty" label="他行账户开户地" width="120">
            <template #default="item">
              <span v-if="item.row.acccty === null">--</span>
              <span v-else>{{ item.row.acccty }}</span>
            </template>
          </el-table-column>
          <el-table-column
                prop="caozuo"
                label="操作"
                width="100"
                class-name="editor"
            >
              <template #default="item">
                <el-button type="text" v-if="item.row.accountBillUrl" style="margin-left: -5px;" @click="excelDownload3(item.row)">下载对账单</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-pagination
        @size-change="handleSizeChanges"
        @current-change="handleCurrentChanges"
        :current-page="currentPages"
        :page-sizes="arrPages"
        :page-size="selectPages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total1"
        >
        </el-pagination>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDelShows = false">取 消</el-button>
          <el-button type="primary" @click="taskDelShows = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
</div>  
</template>
<script>
export default {
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      authStatus: {
        0: "未审核",
        1: "审核通过",
        2: "审核不通过",
      },
      rtnflg: {
        'S': "成功",
        'F': "失败",
        'B': "退票",
        'R': "否决",
        'D': "过期",
        'C': "撤消",
        'M': "商户撤销订单",
        'V': "拒绝",
        'U': "银行挂账",
        'Q': "部分成功",
        'E': "已提交到银行",
      },
      //  交易状态
      trssts: {
        'A': "待交易",
        'W': "待交易",
        'S': "成功",
        'E': "失败",
      },
      taskDelShow: false,
      taskDelShows: false,
      value: '',
      value1: '',
      value2: '',
      input: '',
      reqnbrs: '',
      grtdsp: '',
      grtflg: '',
      taskForm: [],
      tableData: [],
      businessName: '',
      settlementNo: '',
      queryTaskByParam: [],
      bill_status: '',
      startTime: '',
      checkboxSelect: 0,
      total1: 0,
      currentPage: 1,
      currentPages: 1,
      recordNos: 0,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      arrPages: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      selectPages: 500, // 每页选中条数
			tableDatas: [] // 选中的数据
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    search(){
      this.getTableData();
    },
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/quick/record/getBankRecordPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          businessName: this.businessName,
          settlementNo: this.settlementNo,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getQueryTaskByParam() {
      // 打款审核记录明细查询
      this.$http({
        url: "/api/quick/record/getBankRecordDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          recordNo: this.recordNos,
          pageNum: this.currentPages,
          pageSize: 500
        }
      }).then((data) => {
        if (data.code === 0) {
          this.total1 = data.result.length
          this.queryTaskByParam = data.result;
        }
      });
    },
    rtnflgs(row) {
      // 查询支付状态
      this.$http({
        url: "/api/quick/record/querySalaryResult",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          recordNo: row.recordNo,
        }
      }).then((data) => {
        if (data.code === 0) {
          this.getTableData();
          this.$message({
            message: '同步成功',
            type: 'success',
            offset: 60
          })
        }
      });
    },
    excelDownload2(row){
      window.open(row.accountBillUrl)
    },
    excelDownload3(row){
      window.open(row.accountBillUrl)
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSizeChanges(val) {
      // 切换每页条数调用
      this.selectPages = val;
      this.getQueryTaskByParam();
    },
    handleCurrentChanges(val) {
      // 切换当前页数调用
      this.currentPages = val;
      this.getQueryTaskByParam();
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.billdwonload = d;
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    examineShow(row) {
      // 查看
      this.tableDatas = row
      this.taskDelShows = true
      this.recordNos = row.recordNo
      this.getQueryTaskByParam()
    },
    examines(row) {
      // 审核
      this.grtdsp = ''
      this.taskDelShow = true
      this.reqnbrs = row.reqnbr
    },
    taskDelShow1(nums){
      if(nums == 1){
        this.grtflg = 'N'
      }else {
        this.grtflg = 'Y'
      }
      // 平台端打款流程审批
      this.$http({
        url: "/api/quick/record/bankRecordPass",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          grtdsp: this.grtdsp,
          grtflg: this.grtflg,
          reqnbr: this.reqnbrs,
          pageNum: 1,
          pageSize: 100
        }
      }).then((data) => {
        if (data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            offset: 60
          })
          this.getTableData();
          this.taskDelShow = false
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'billedBody') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData();
    }
  },
};
</script>
<style>
.examines {
  margin-top: 30px;
}
.examines b {
  font-size: 13px;
  font-weight: normal;
  color: #333;
  float: left;
  margin: -5px 13px 0 8%;
}
.examines .el-textarea {
  width: 70%;
}
.examines .el-textarea__inner {
  height: 100px;
}
</style>
<style scoped>
.infoCon {
  float: left;
  margin-bottom: 30px;
}
.el-dialog__body {
  padding-top: 0;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
}
</style>
